<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XDdd</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>
    <link rel="bookmark" th:href="@{/favicon.ico}"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
            integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
            integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
          integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jsencrypt@3.0.0-rc.1/bin/jsencrypt.js"
            integrity="sha256-LPq6JjUcx8tPxyR4owz9280cfG70ZRA7g5LlWUgaTo4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@latest/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="container" style="max-width: 700px" id="app">

    <div class="row">
        <div class="col-12 col-md" style="margin: 40px">
            <h3 class="text-info text-center">西电晨午晚检自动填报工具:demo</h3>

            <form method="post" name="form" action="/submit" v-on:submit.prevent="upload">
                <div class="form-group">
                    <label for="id">学号</label>
                    <input id="id" name="id" type="text" class="form-control" placeholder="id" v-model="id">
                </div>
                <div class="form-group">
                    <label for="password">password</label>
                    <input id="password" name="password" type="password" class="form-control" placeholder="Password"
                           v-model="password">
                </div>
                <div class="form-group">
                    <button name="action" value="submit" type="submit" class="btn btn-outline-primary"
                            v-on:click="setSubmit">auto submit
                    </button>
                    <button name="action" value="cancel" type="submit" class="btn btn-outline-danger"
                            v-on:click="setCancel"
                            style="margin-left: 10px">
                        cancel
                    </button>

                    <span class="text-primary font-weight-bold font-italic" v-if="flag">{{ response }}</span>
                </div>
                <div class="form-group">
                    <a class="text-info" v-on:click="showInfo">Help?</a>
                </div>
            </form>
        </div>
    </div>

    <footer class="pt-3 border-top">
        <div class="row ">
            <div class="col-12 col-md">
                <p>
                    <a class="font-weight-bold  text-dark">Copyright&copy;2020</a> -
                    <a target="_blank" href="https://gitee.com/bugpro"><i class="fa fa-github"></i>
                        Gitee</a>
                </p>
            </div>
        </div>
    </footer>
</div>
</body>
<script th:inline="javascript">
    const publicKey = [[${publicKey}]];

    new Vue({
        el: '#app',
        data: {
            id: '',
            password: '',
            action: '',
            flag: false,
            response: ''
        },
        methods: {
            showInfo() {
                alert("1. 服务器需记录您的学号与密码\n" +
                    "2. 每2小时填报一次\n" +
                    "3. 使用RSA非对称算法对数据进行加密");
            },
            upload() {
                const encryptor = new JSEncrypt();
                encryptor.setPublicKey(publicKey);

                const formData = new FormData();
                formData.append("id", encryptor.encrypt(this.id));
                formData.append("password", encryptor.encrypt(this.password));
                formData.append("action", this.action);
                axios({
                    method: "post",
                    url: "/xdcov/submit",
                    headers: {
                        "Content-Type": "multipart/form-data"
                    },
                    data: formData
                }).then((res) => {
                    this.flag = true;
                    this.response = res.data;
                    console.log(res);
                });
            },
            setSubmit() {
                this.action = 'submit';
            },
            setCancel() {
                this.action = 'cancel';
            }
        }
    });
</script>
</html>